<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
        <style type="text/css">
            body {
                background:#141414;
                color:#FFF;
                font-family:Arial, Helvetica, sans-serif;
            }
            #rte_toolbar {
                background: #262626;
                height:30px;
                cursor:pointer;
                padding-left:2px;
            }
            
            .rte_button {
                width:20px;
                height:20px;
                border:1px solid #262626;
                float:left;
                margin:4px 2px;
                background: #EEE;
                cursor:pointer;
                background: #262626;
            }
            
            .rte_button:hover {
                background-color: #777 !important;
                border:1px solid #FFF;
            }
            
             .rte_button:hover span{
                border-left:1px solid #FFF;
            }
            
            #input textarea {
                width:570px;
                height:230px;
                background:#222;
                border: 1px solid #AEAE9B;
                font-size:13px;
                color:#FFF;
                font-family:Arial, Helvetica, sans-serif;
                line-height:16px;
            }

            #input input[type=submit] {
                font-size:14px;
                font-weight:bold;
                color: #000;
                width:165px;
                padding:6px;
                border-style:solid;
                border-top-width:2px;
                border-right-width:2px;
                border-bottom-width:2px;
                border-left-width:2px;
                border-top-color:#FFFFFF;
                border-right-color:#E9E9DE;
                border-bottom-color:#E9E9DE;
                border-left-color:#FFFFFF;
            }
            
            #rte_colour {
                width:28px !important;
            }
            
            #rte_current_color {
                width:16px !important;
                height:3px !important;
                background:green !important;
                border:0 !important;
                margin:0 !important;
                position:relative;
                top:17px;
                left:2px;
                
            }
            
            #rte_colour_seperator {
                display:block;
                background:none;
                width:1px;
                height:20px;
                border-left:1px solid #666;
                position:relative;
                top:0px;
                left:19px;
            }
            
            .seperator {
                float:left;
                height:20px;
                margin:4px 2px;
                border:1px inset #666;
            }
            
            #rte_palette {
                width:56px;
                height:56px;
                border:1px solid #222 !important;
                background:#666;
                position:relative;
                top:2px;
                left:-2px;
                display:none;
            }
            
            .rte_palette_colour {
                float:left;
                width:10px;
                height:10px;
                margin:3px;
                border:1px solid #999;
            }
            
            .rte_palette_colour:hover {
                border:1px solid #FFF;
            }
            #rte_colour_white {background:#FFF}
            #rte_colour_red {background:#FF0000}
            #rte_colour_green {background:#8DC63F}
            #rte_colour_blue {background:#44AEDF}
            #rte_colour_yellow {background:#FFDE00}
            #rte_colour_olive {background:	#808000}
            #rte_colour_limegreen {background:#C0FFC0}
            #rte_colour_orange {background:#F7941C}
            #rte_colour_multisync {background:#F49AC1}
            
        </style>
        <script type="text/javascript">
            /*
             *  Converted using http://www.greywyvern.com/code/php/binary2base64
             */
            var imgsrc = "";

        </script>
	</head>
	<body>
    <div id="rte_toolbar">
        <span class="seperator"> </span>
        <div id="rte_colour" title="Font Colour" class="rte_button" onclick="togglePalette()">
            <div id="rte_current_color"></div>
            <span id="rte_colour_seperator"> </span>
            <div id="rte_palette">
                <div class="rte_palette_colour" id="rte_colour_white" title="White"> </div>
                <div class="rte_palette_colour" id="rte_colour_red" title="Red"> </div>
                <div class="rte_palette_colour" id="rte_colour_green" title="Green"> </div>
                <div class="rte_palette_colour" id="rte_colour_blue" title="Blue"> </div>
                <div class="rte_palette_colour" id="rte_colour_yellow" title="Yellow"> </div>
                <div class="rte_palette_colour" id="rte_colour_olive" title="Olive"> </div>
                <div class="rte_palette_colour" id="rte_colour_limegreen" title="Limegreen"> </div>
                <div class="rte_palette_colour" id="rte_colour_orange" title="Orange"> </div>
                <div class="rte_palette_colour" id="rte_colour_multisync" title="Multisync"> </div>
            </div>
        </div>
        <span class="seperator"> </span>
        <div id="rte_bold" title="Bold" class="rte_button"></div>
        <div id="rte_italic" title="Italic" class="rte_button"></div>
        <div id="rte_underline" title="Underline" class="rte_button"></div>
        <div id="rte_strike" title="Strikethrough" class="rte_button"></div>
        <span class="seperator"> </span>
        <div id="rte_quote" title="Quote" class="rte_button"></div>
        <div id="rte_sample" title="Sample" class="rte_button"></div>
        <div id="rte_spoiler" title="Spoiler" class="rte_button"></div>
        <div id="rte_code" title="Code" class="rte_button"></div>
        <span class="seperator"> </span>
    </div>
    <div id="input">
        <div><textarea></textarea></div>
        <div id="submit"><input type="submit" value="Post" /></div>
    </div>
            <script type="text/javascript">
        var rte_colour = document.getElementById('rte_colour');
        var rte_color_arrow = document.getElementById('rte_bold');
        var rte_bold = document.getElementById('rte_bold');
        var rte_italic = document.getElementById('rte_italic');
        var rte_underline = document.getElementById('rte_underline');
        var rte_strike = document.getElementById('rte_strike');
        var rte_quote = document.getElementById('rte_quote');
        var rte_sample = document.getElementById('rte_sample');
        var rte_spoiler = document.getElementById('rte_spoiler');
        var rte_code = document.getElementById('rte_code');
        rte_colour.style.background = 'transparent url('+imgsrc+') -40px 0 no-repeat';
        rte_bold.style.background = 'transparent url('+imgsrc+') 0 0 no-repeat';
        rte_italic.style.background = 'transparent url('+imgsrc+') -80px 0 no-repeat';
        rte_underline.style.background = 'transparent url('+imgsrc+') -180px 0 no-repeat';
        rte_strike.style.background = 'transparent url('+imgsrc+') -160px 0 no-repeat';
        rte_quote.style.background = 'transparent url('+imgsrc+') -100px 0 no-repeat';
        rte_sample.style.background = 'transparent url('+imgsrc+') -120px 0 no-repeat';
        rte_spoiler.style.background = 'transparent url('+imgsrc+') -140px 0 no-repeat';
        rte_code.style.background = 'transparent url('+imgsrc+') -20px 0 no-repeat';
        
        function togglePalette() {
            var p = document.getElementById('rte_palette');
            if ('block' == p.style.display) {
                p.style.display = 'none';
            }
            else {
                p.style.display = 'block';
            } 
        }
    </script>
    </body>

</html>
